<template>
  <div class="app-container">
    <el-card>
      <title-line title="平台信息" />
      <el-row class="section-container">
        <el-col :span="12" class="section-container-base-info">
          <img class="base-info-img" :src="platform.shopLogoUrl" />
          <div class="base-info-box ml-10">
            <h3 class="base-info-box-title">
              {{ platform.shopName }}
            </h3>
            <p class="base-info-box-subtitle">
              <i class="el-icon-location-outline pr-5"></i>
              <span>联系地址：{{ platform.address ? platform.address : '暂无' }}</span>
            </p>
            <div class="flex items-center justify-between">
              <p class="base-info-box-subtitle">
                <i class="el-icon-phone-outline pr-5"></i>
                <span>客服电话：{{ platform.customPhone }}</span>
              </p>
              <el-button type="text" @click="goBaseSet">设置</el-button>
            </div>
          </div>
        </el-col>

        <el-col :span="12" class="section-container-other-info">
          <div v-for="(item, index) in platformInfo" :key="index" class="other-info-box">
            <p>{{ item.title }}</p>
            <p class="other-info-box-text">
              {{ item.value }}
            </p>
            <router-link :to="{ name: item.name, query: item.query }" style="color: #293c66">
              {{ item.label }}
            </router-link>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mt-20">
      <title-line title="其他设置" />
      <ul class="other-set-list">
        <li v-for="(item, index) in setting" :key="index" class="other-set-item">
          <img class="other-set-item-img" :src="item.icon" />
          <h3 class="other-set-item-title">
            {{ item.title }}
          </h3>
          <span class="other-set-item-subtitle">{{ item.subtitle }}</span>
          <el-button type="primary" class="mt-10" @click="goClickHandle(item.path)">
            去设置
          </el-button>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'System',
  components: {},
  props: {},
  data() {
    return {
      dataSource: [],
      platform: {},
      platformInfo: [
        {
          key: 'administratorTotal',
          title: '已有管理员',
          label: '去添加',
          value: '',
          name: 'AdminList',
          query: {
            addType: 'platform'
          }
        },
        {
          key: 'administratorCharacter',
          title: '已有管理角色',
          label: '去添加',
          value: '',
          name: 'AdminList',
          query: {
            addType: 'role'
          }
        },
        {
          key: 'logTotal',
          title: '操作记录（条）',
          label: '查看详情',
          value: '',
          name: 'AdminList',
          query: {
            addType: 'log'
          }
        }
      ]
    }
  },
  computed: {
    styleObj() {
      return {
        justifyContent: 'space-between'
      }
    },
    setting() {
      return [
        {
          title: '交易设置',
          subtitle: '保障交易过程的安全性',
          icon: require('@/assets/deal-set.png'),
          path: '/setting/deal_set'
        },
        {
          title: '协议设置',
          subtitle: '平台相关协议管理',
          icon: require('@/assets/tcp-set.png'),
          path: '/setting/agreement_set'
        },
        {
          title: '帮助中心',
          subtitle: '轻松对平台进行操作设置',
          icon: require('@/assets/help-center.png'),
          path: '/setting/help_center'
        },
        {
          title: '系统管理员',
          subtitle: '提高运营效率让工作合理分配',
          icon: require('@/assets/admin.png'),
          path: '/setting/system_admin'
        }
      ]
    }
  },
  watch: {},
  created() {
    this.getSettingCount()
    this.getShoppingSet()
  },
  mounted() {},
  methods: {
    //  获取统计
    async getSettingCount() {
      const { data } = await this.$http.system.base.getSettingCount()
      this.platformInfo = this.platformInfo.map(item => {
        for (const key in data) {
          if (item.key === key) {
            item.value = data[key]
          }
        }
        return item
      })
    },
    // 获取基本信息
    async getShoppingSet() {
      const { data } = await this.$http.system.base.getShoppingSet()
      this.platform = data
    },
    goClickHandle(path) {
      this.$router.push({ path })
    },
    goToSendNews() {
      this.$router.push({ path: '/setting/news/add_news' })
    },
    goBaseSet() {
      this.$router.push({ path: '/setting/basic_set' })
    }
  }
}
</script>

<style lang="scss" scoped>
.section-container {
  display: flex;
  justify-content: space-between;
  &-base-info {
    display: flex;
    .base-info-img {
      width: 80px;
      height: 80px;
      border-radius: 5px;
    }
    .base-info-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-title,
      &-subtitle {
        font-size: 14px;
      }
    }
  }
  &-other-info {
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    .other-info-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      &-text {
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
}
.system-news {
  &-box {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
  }
  &-pointer {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 10px;
    background-color: $hw-bg-color;
  }
}
.other-set {
  &-list {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  &-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 20%;
    &-img {
      width: 45px;
      height: 45px;
    }
    &-title {
      font-size: 14px;
      padding: 10px 0;
    }
    &-subtitle {
      font-size: 12px;
      color: $hw-text-color-title;
    }
  }
}
</style>
